<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>首页</title>
	<link rel="stylesheet" href="css/font-awesome.css" />
	<link rel="stylesheet" href="css/base.css" />
	<link rel="stylesheet" href="css/common.css" />
	<link rel="stylesheet" href="css/index.css" />
	<link rel="stylesheet" href="css/ui_date.css" />
	<script src="js/jquery.js"></script>
	<script src="js/ui.date.js"></script>
	<style>
	#jcalendar {
		margin: 0 auto;
		width: 210px;
		height: 140px;
		background: #E0ECF9;
		border: 1px solid #479AC7;

	}
	#jcalendar span {
		float: left;
		width: 210px;
		height: 20px;
		background:#479AC7;
		color:#f90;
		font-weight:bolder;
		text-align:center;
	}
	.week {
		background:#D5F3F4;
		color:#808080;
	}
	.current {
		background:#336699;
		color:#fff;
	}
	#jcalendar a {
		float: left;
		width: 30px;
		height: 20px;
		color: #000;
		line-height: 20px;
		text-align: center;
		text-decoration: none;
	}
	#jcalendar .ybn {
		color: #000;
	}

	#jcalendar .mbn {
		color: #000040;
	}

	#jcalendar .weekend {
		color: #f00!important;
	}

	#jcalendar a.day:hover {
		color: #99c3f6;
	}
	</style>
</head>
<body>
	<div class="header__wrap">
		
	</div>
	<!-- 主体 start -->
	<div class="worker">
		<div class="worker-box clearfix">
			<div class="userbar">
				<div class="ui-date data">
					<div class="date-tt">
						<div class="prev fa fa-angle-left"></div>
						<h3>2015年三月</h3>
						<div class="next fa fa-angle-right"></div>
					</div>
					<div class="date-body">
						<table>
							<thead>
								<tr>
									<td class="data-body-item">一</td>
									<td class="data-body-item">二</td>
									<td class="data-body-item">三</td>
									<td class="data-body-item">四</td>
									<td class="data-body-item">五</td>
									<td class="data-body-item">六</td>
									<td class="data-body-item">日</td>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td class="data-body-item hover"><a href="javascript:;">1</a></td>
									<td class="data-body-item"><a href="javascript:;">2</a></td>
									<td class="data-body-item"><a href="javascript:;">3</a></td>
									<td class="data-body-item"><a href="javascript:;">4</a></td>
									<td class="data-body-item"><a href="javascript:;">5</a></td>
									<td class="data-body-item"><a href="javascript:;">6</a></td>
									<td class="data-body-item active"><a href="javascript:;">31</a></td>
								</tr>
								<tr>
									<td class="data-body-item"><a href="javascript:;">8</a></td>
									<td class="data-body-item"><a href="javascript:;">9</a></td>
									<td class="data-body-item"><a href="javascript:;">10</a></td>
									<td class="data-body-item"><a href="javascript:;">11</a></td>
									<td class="data-body-item"><a href="javascript:;">12</a></td>
									<td class="data-body-item"><a href="javascript:;">13</a></td>
									<td class="data-body-item"><a href="javascript:;">14</a></td>
								</tr>
								<tr>
									<td class="data-body-item"><a href="javascript:;">8</a></td>
									<td class="data-body-item"><a href="javascript:;">9</a></td>
									<td class="data-body-item"><a href="javascript:;">10</a></td>
									<td class="data-body-item"><a href="javascript:;">11</a></td>
									<td class="data-body-item"><a href="javascript:;">12</a></td>
									<td class="data-body-item"><a href="javascript:;">13</a></td>
									<td class="data-body-item"><a href="javascript:;">14</a></td>
								</tr>
								<tr>
									<td class="data-body-item"><a href="javascript:;">8</a></td>
									<td class="data-body-item"><a href="javascript:;">9</a></td>
									<td class="data-body-item"><a href="javascript:;">10</a></td>
									<td class="data-body-item"><a href="javascript:;">11</a></td>
									<td class="data-body-item"><a href="javascript:;">12</a></td>
									<td class="data-body-item"><a href="javascript:;">13</a></td>
									<td class="data-body-item"><a href="javascript:;">14</a></td>
								</tr>
								<tr>
									<td class="data-body-item"><a href="javascript:;">8</a></td>
									<td class="data-body-item"><a href="javascript:;">9</a></td>
									<td class="data-body-item"><a href="javascript:;">10</a></td>
									<td class="data-body-item"><a href="javascript:;">11</a></td>
									<td class="data-body-item"><a href="javascript:;">12</a></td>
									<td class="data-body-item"><a href="javascript:;">13</a></td>
									<td class="data-body-item"><a href="javascript:;">14</a></td>
								</tr>
								<tr>
									<td class="data-body-item"><a href="javascript:;">8</a></td>
									<td class="data-body-item"><a href="javascript:;">9</a></td>
									<td class="data-body-item"><a href="javascript:;">10</a></td>
									<td class="data-body-item"><a href="javascript:;">11</a></td>
									<td class="data-body-item"><a href="javascript:;">12</a></td>
									<td class="data-body-item"><a href="javascript:;">13</a></td>
									<td class="data-body-item"><a href="javascript:;">14</a></td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>


			</div>
			<div class="worker-con"></div>
		</div>
	</div>
	<!-- 主体 End -->


	<script>
	console.dir(new uiDate({
		container: $('.userbar')
	}));
	var now = new Date();
	var year = now.getFullYear();
	var month = now.getMonth() + 1;
	var date = now.getDate();
	var firstDay = new Date( year, month - 1, 1 ).getDay();
	var lastDay = new Date( year, month, 0 ).getDate();
	var dates = lastDay;
	var arr = new Array(35);
	for ( var i = 0, j = firstDay; i < dates; i++, j++ ) {
		arr[ j ] = year + '-' + month + '-' + ( i + 1 );
	}
	// 生成静态日历
	/*var body = document.getElementsByTagName('body')[0],
		a = document.createElement('a'),
		calendar = document.createElement('div'),
		thead = document.createElement('span');
	body.insertBefore( calendar, null );
	calendar.setAttribute( 'id', 'jcalendar' );
	thead.innerHTML = year + '年' + month + '月';
	calendar.appendChild( thead );
	var weeks = '0123456'.split('');
	for ( i = 0; i < 7; i++ ) {
		var th = a.cloneNode();
		th.innerHTML = weeks[ i ];
		th.className = 'week';
		calendar.appendChild( th );
	}
	for ( i = 0; i < 35; i++ ) {
		var td = a.cloneNode();
		if ( arr[ i ] == undefined ) {
			calendar.appendChild( td );
		} else {
			var html = arr[ i ].split('-')[2];
			td.innerHTML = html;
			if ( html == date ) {
				td.className = 'current';
			} 
			calendar.appendChild( td );
		}
	}*/

	// 修改 封装
	var fillArray = function ( year, month ){
		var firstDay = new Date( year, month - 1, 1 ).getDay(),
			lastDay = new Date( year, month, 0 ).getDate(),
			dates = lastDay,
			arr = new Array( 35 );
			for ( var i = 0, j = firstDay; i < dates; i++, j++ ) {
				arr[ j ] = year + '-' + month + '-' + ( i + 1 );
			}
			return arr;
	};
	var nextmonth = function ( year, month, date ){
		month = month + 1;
		if ( month > 12 ) {
			year = year + 1, month = 1;
		}
		var arr = fillArray( year, month );
		drawCalendar( arr, year, month, date );
	}
	var drawCalendar = function ( arr, year, month, date ){
		var _calendar = document.getElementById('jcalendar');
		if ( _calendar ) {
			_calendar.parentNode.removeChild( _calendar );
		}
		var body = document.getElementsByTagName('body')[0],
			a = document.createElement('a'),
			calendar = document.createElement('div'),
			thead = document.createElement('span');
		body.insertBefore( calendar, null );
		calendar.setAttribute( 'id', 'jcalendar' );
		var args = year + ',' + month + ',' + date,
			preyear = '<TT class=ybn onclick="preyear('+args+')"><<</TT>',
			premonth = '<TT class=mbn onclick="premonth('+args+')"><</TT>',
			nextmonth = '<TT class=mbn onclick="nextmonth('+args+')">></TT>',
			nextyear = '<TT class=ybn onclick="nextyear('+args+')">>></TT>',
			str = new Date(args.replace(/,/g,'/')).toLocaleDateString();
			thead.innerHTML = preyear + ' '+premonth + ' '+str+' '+nextmonth + ' '+nextyear;
			calendar.appendChild(thead);
			var weeks = "日一二三四五六".split('');//日历第二行的内容，显示星期几
		for(i = 0;i< 7;i++){
	        var th = a.cloneNode();
	        th.innerHTML = weeks[i];
	        th.className = 'week';
	        calendar.appendChild(th);
	    }
	    for(i = 0;i <35;i++){
	        var td = a.cloneNode();
	        if(arr[i] == undefined ){
	            calendar.appendChild(td);
	        }else{
	            var html = arr[i].split('-')[2];
	            td.innerHTML = html;
	            td.className = 'day';
	            td.href = "javascript:void(0)";//为ie6准备的
	            if(date && html == date){
	                td.className = td.className +' current';
	            }
	            if(i%7 == 0 || i%7 == 6){
	                td.className = td.className +' weekend';
	            }
	            td.onclick = (function(i){
	                return function(){
	                    alert(i);//这里后面我们要修改，让arr[i]填空文本域
	                }
	            })(arr[i]);
		            calendar.appendChild(td);
		        }
	   		}
		}
		var Class = {
			create: function (){
				return function (){
					this.initialize.apply( this, arguments );
				}
			}
		}
		var Jcalendar = Class.create();
		Jcalendar.prototype = {
			Default: {
				year: new Date().getFullYear(),
				month: new Date().getMonth(),
				date: new Date().getDate()
			},
			initialize: function ( opt ){
				var opt = this.opt = $.extend( {}, this.Default, opt );
				// year, month, date
				this.drawCalendar( opt.year, opt.month + 1, opt.date );

				this.__init();
			},
			__init: function (){
				var doc = document,
					opt = this.opt;
				this._calendar = doc.getElementById( opt.id ) || '';
				this.weeks = '日一二三四五六'.split('');
				this.arr = this.fillArray( opt.year, opt.month );
			},
			fillArray: function ( year, month ){
				var f = new Date( year, month - 1, 1 ).getDay(),	// 今月第一天是星期几
					dates = new Date( year, month, 0 ).getDate(),	// 今月最后一天
					arr = [];
					for ( var i = 0; i < dates; i++ ) {
						arr[ f++ ] = year + '-' + month + '-' + ( i + 1 );
					}
					return arr;
			},
			createHeader: function (){
				var doc = document,
					tt = doc.createElement('div'),
					btn = doc.createElement('i');
				for ( var i = 0; i < 4; i++ ) {
					var clone = btn.cloneNode( true );
					/*clone.onclick = (function ( index ){
						return function (){
							_this.redrwCalendar( year, month, date, index );
						}
					})( i );*/
					switch ( i ) {
						case 0:
							clone.className = 'fa fa-angle-left';
							break;
						case 1:
							tt.appendChild( doc.createTextNode( year + '年' + month + '月' + date + '日' ) );
							break;
						case 2:
							clone.className = 'fa fa-angle-right';
							break;
					}
					tt.className = 'date-tt';
					tt.appendChild( clone );
				}
			},
			createBody: function (){},
			drawCalendar: function ( year, month, date ){
				var _this = this,
					oParent = _this.opt.oParent || document.body,
					calendar = document.createElement('div'),
					fragment = document.createDocumentFragment();
				_this.createHeader();
				if ( this._calendar ) {
					_calendar.parentNode.removeChild( _this._calendar );
				}
				oParent.insertBefore( calendar, null );
				calendar.setAttribute( 'class', 'ui-date' );

				fragment.appendChild( thead );
				for ( i = 0; i < 7; i++ ) {
					var th = a.cloneNode( true );
					th.innerHTML = weeks[ i ];
					th.className = 'week';
					fragment.appendChild( th );
				}
				for ( i = 0; i < arr.length; i++ ) {
					var td = a.cloneNode( true );
					if ( arr[ i ] == undefined ) {
						fragment.appendChild( td );
					} else {
						var html = arr[ i ].split('-')[2];
						td.innerHTML = html;
						td.className = 'day';
						td.href = 'javascript:;';
						( date && html == date ) && ( td.className += ' current' );
						( i % 7 == 0 || i % 7 == 6 ) && ( td.className += ' weekend' );
						td.onclick = ( function ( i ){
							return function (){
								alert( i );
							}
						} )( arr[ i ] );
						fragment.appendChild( td );
					}
				}
				calendar.appendChild( fragment );

			},
			redrwCalendar: function ( year, month, date, index ){
				switch ( index ) {
					case 0:
						year--;
						break;
					case 1:
						month--;
						( month < 1 ) && ( year--, month = 12 );
						break;
					case 2:
						month++;
						( month > 12 ) && ( year++, month = 1 );
						break;
					case 3:
						year++;
						break;
				}
				this.drawCalendar( year, month, date );
			}
		};
		console.dir( new Jcalendar({
			id: '',
			'class': 'calendar'
		}) );
	</script>

</body>
</html>